import React, { useEffect, useRef, useState } from 'react';
import './index.css';

interface CalendarProps{
  value?: Date;
  defaultValue?: Date;
  onChange?: (date: Date) => void;
}
function Calendar(props: CalendarProps) {
  // 组件也需考虑受控与非受控
  // 更加偏向于受控，这里的初始状态是父组件提供，状态的修改也是父组件去修改
  const {
    value: propsValue,
    defaultValue,
    onChange,
  } = props;

  const [value, setValue] = useState(() => {
    if (propsValue !== undefined) {
        // 受控，组件完全由propsValue决定
        return propsValue
    } else {
        // 非受控，这里返回默认值，
        return defaultValue
    }
  });

  const isFirstRender = useRef(true)

  useEffect(() => {
    // 外部value值从其他变成了undefined
    if (propsValue === undefined && !isFirstRender.current) {
        // 不是首次渲染，value变成undefined，从受控切换为非受控
        setValue(propsValue)
    }
    isFirstRender.current = false
  }, [propsValue])

  // propsValue是undefined，表示非受控，组件值由value决定，value由自己内部setValue决定；
  // propsValue不是undefined，受控，用外部的propsValue决定
  const mergedValue = propsValue === undefined ? value : propsValue
  

  function changeValue(date: Date) {
    // 非受控
    if (propsValue === undefined) {
        setValue(date)
    }
    onChange?.(date);
  } 


  return <div>
    {mergedValue && mergedValue.toLocaleDateString()}
    <div onClick={()=> {changeValue(new Date('2024-5-1'))}}>2023-5-1</div>
    <div onClick={()=> {changeValue(new Date('2024-5-2'))}}>2023-5-2</div>
    <div onClick={()=> {changeValue(new Date('2024-5-3'))}}>2023-5-3</div>
  </div>
}

function App() {
    // 受控
    // const [value, setValue] = useState(new Date('2024-5-1'))
    // return <Calendar value={value} onChange={(date) => {
    //     console.log(date.toLocaleDateString());
    //     setValue(date)
    // }}/>
    // 非受控
    return <Calendar defaultValue={new Date('2024-5-1')} onChange={(date) => {
        console.log(date.toLocaleDateString());
    }}/>
}

export default App;
